<template>
    <div class="cruise_preview_container">

        <el-breadcrumb separator="/">
            <el-breadcrumb-item>产品</el-breadcrumb-item>
            <el-breadcrumb-item>游轮趣玩</el-breadcrumb-item>
            <el-breadcrumb-item>预览</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 闪购信息 -->
        <el-card>
            <!-- title -->
            <el-row class="title font18">
                <el-col>游轮趣玩预览</el-col>
            </el-row>

            <!-- 主体内容 -->
            <div class="cruise_preview_content">
                <div class="flashover">

                    <!-- 二维码 -->
                    <div class="code_box">
                        <div class="code">小程序码</div>
                        <span>手机扫描小程序码进行预览</span>
                    </div>

                    <div class="item">
                        <div class="k">标题：</div>
                        <div class="val">{{ title }}</div>
                    </div>

                    <div class="item">
                        <div class="k">副标题：</div>
                        <div class="val">{{ subtitle }}</div>
                    </div>

                    <div class="item">
                        <div class="k">编码：</div>
                        <div class="val">{{ sn }}</div>
                    </div>

                    <div class="item">
                        <div class="k">展示图片：</div>
                        <img v-for="(item,index) in picture" style="width: 200px" :src="item" alt="">
                    </div>

                    <div class="item">
                        <div class="k">原价：</div>
                        <div class="val">￥{{ price }}</div>
                    </div>

                    <div class="item1">
                        <div class="k">产品介绍：</div>
                        <div class="text">{{ content }}</div>
                    </div>
                </div>
            </div>
        </el-card>

        <!-- 购买须知 -->
        <el-card>

            <!-- title -->
            <el-row class="title">
                <el-col>购买须知</el-col>
            </el-row>

            <div class="cruise_preview_content">
                <div class="flashover">

                    <div class="item1">
                        <div class="k">人群须知：</div>
                        <div class="text">{{ crowd_notice }}</div>
                    </div>

                    <div class="item1">
                        <div class="k">使用方法：</div>
                        <ul class="text_more">
                            <div class="text">{{ crowd_notice }}</div>
                        </ul>
                    </div>

                    <div class="item1">
                        <div class="k">注意事项：</div>
                        <ul class="text_more">
                            <div class="text">{{ matter_con }}</div>
                        </ul>
                    </div>

                </div>
            </div>
        </el-card>

        <!-- 费用说明 -->
        <el-card>

            <!-- title -->
            <el-row class="title">
                <el-col>费用说明</el-col>
            </el-row>

            <div class="cruise_preview_content">
                <div class="flashover">

                    <div class="item1">
                        <div class="k">费用包含：</div>
                        <div class="val">
                            {{ cost_contain }}
                        </div>
                    </div>

                    <div class="item1">
                        <div class="k">费用不含：</div>
                        <div class="val">
                            {{ cost_exclusive }}
                        </div>
                    </div>

                </div>
            </div>
        </el-card>

        <!-- 行程管理 -->
        <el-card>
            <!-- title -->
            <el-row class="title">
                <el-col>行程管理</el-col>
            </el-row>

            <div class="cruise_preview_content">
                <div class="Trip" v-for="(item,index) in trip_list" :key="index">
                    <div class="table_title">
                        <div class="left">
                            <span>第{{ item.trip_day }}天</span>
                            <span>{{ item.trip_name }}</span>
                        </div>
                    </div>
                    <!--行程标签开始-->
                    <div class="trip-container">
                        <el-row class="trip-tr" :gutter="20">
                            <el-col class="trip-th" :span="2">行程标签</el-col>
                            <el-col class="trip-td" :span="22">行程内容</el-col>
                        </el-row>
                        <el-row class="trip-tr" :gutter="20" v-for="v in (item.trip_label)" :key="v.label">
                            <el-col class="trip-th" :span="2">{{ v.label }}</el-col>
                            <el-col class="trip-td" :span="22">{{ v.label_content }}</el-col>
                        </el-row>
                    </div>
                    <!--行程标签结束-->
                </div>
            </div>
        </el-card>

        <!-- 价格管理 -->
        <el-card>
            <!-- title -->
            <el-row class="title">
                <el-col>价格管理</el-col>
            </el-row>

            <div class="cruise_preview_content">
                <div v-for="(item,index) in all_room_list" :key="item.id">
                    <div class="flashover">
                        <div class="item1">
                            <div class="k">舱位名称：</div>
                            <div class="val">{{ item.beth_room }}</div>
                        </div>

                        <div class="item1">
                            <div class="k">舱位图片：</div>
                            <div class="val">
                                <img :src="item.picture " style="width: 100px;height: 100px" class="img_box" alt="">
                            </div>
                        </div>

                        <!-- 表格 -->
                        <el-table :data="item.room_list" border style="width: 100%">
                            <el-table-column label="房间名称" width="403">
                                <div class="info_box" slot-scope="scope">
                                    <img :src="scope.row.picture" style="width: 80px;height: 80px" class="img_box" alt="">

                                    <div class="right">
                                        <span>{{ scope.row.title }}</span>
                                        <span class="colo_red">￥{{ scope.row.price }}</span>
                                        <span>入住{{scope.row.count }}人</span>
                                    </div>
                                </div>
                            </el-table-column>

                            <el-table-column prop="area" label="房间面积">
                            </el-table-column>

                            <el-table-column prop="floor" label="房间楼层">
                            </el-table-column>

                            <el-table-column prop="total_count" label="房间数量">
                            </el-table-column>

                            <el-table-column prop="sale_count" label="房间销量">
                            </el-table-column>
                        </el-table>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
        </el-card>

        <!-- 审核是否通过 -->
        <div class="Auditing" v-if="is_audit !== 1">
            <div class="left">
                <span class="my_icon">!</span>
                <span class="text">提交前请仔细检查各项信息！</span>
            </div>

            <div class="right">
                <el-button @click="back">返回</el-button>
                <el-button @click="not_pass_show = true" type="danger">审核不通过</el-button>
                <el-button @click="pass" type="primary">审核通过</el-button>
            </div>
        </div>

        <!-- 审核不通过 -->
        <el-dialog title="审核不通过" :visible.sync="not_pass_show" width="30%">
            <!-- 文本框 -->
            <el-input rows="7" style="resize:none;"  type="textarea" v-model="reason"
                      placeholder="请输入审核不通过的理由"></el-input>

            <span slot="footer" class="dialog-footer">
                <el-button @click="hideReason">取 消</el-button>
                <el-button type="primary" @click="sendReason">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script src='../../../static/js/cruise/preview.js'></script>


<style scoped>
    @import "../../../static/css/cruise/preview.css";
</style>


